import {
  Form,
  Input,
  InputNumber,
  Button,
  DatePicker,
  Cascader,
} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import "./apply.scss"
const layout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 12,
  },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};
/* eslint-enable no-template-curly-in-string */


const goods = [
  {
    value: '医疗物资',
    label: '医疗物资',
    children: [
      {
        value: '纱布',
        label: '纱布',
      },
    ],
  },
  {
    value: '日常物资',
    label: '日常物资',
    children: [
      {
        value: '电池',
        label: '电池',
      },
    ],
  },
];
const Apply = () => {

  const onFinish = (values: any) => {
    console.log(values);
  };

  return (
    <div className="apply-form-wrapper">
      <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
        <Form.Item
          name={['user', 'name']}
          label="姓名"
          rules={[{ required: true, },]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'email']}
          label="邮箱"
          rules={[{ type: 'email', },]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'date']}
          label="期望时间">
          <DatePicker />
        </Form.Item>
        <Form.List name="demand">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <div key={key} className="demand-wrapper">
                <Form.Item  
                  shouldUpdate={(prevValues, curValues) => prevValues.demand !== curValues.demand}
                  { ...restField }
                  label="物品种类"
                  name={[name,"item-name"]}
                  rules={[
                    { type: 'array', required: true, message: 'Please select your habitual residence!' },
                  ]}
                  className="item-name"
                >
                  <Cascader options={goods} />
                </Form.Item>
                <Form.Item
                  { ...restField }
                  label="数量"
                  name={[name,"item-number"]}
                  rules={[{ required: true, message: 'Missing number' }]}
                  className="item-number"
                >
                  <InputNumber min={1} />
                </Form.Item>
                <MinusCircleOutlined className="item-delete" onClick={() => remove(name)} />
              </div>
            ))}
            <Form.Item  wrapperCol={{ ...layout.wrapperCol, offset: 7 }}>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
        <Form.Item name={["demand","item-description"]} label="备注信息">
          <Input.TextArea />
        </Form.Item>
        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 11 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Apply